﻿@{
    Layout = null;
}

<!DOCTYPE html>

<html>
<head>
    <meta http-equiv="Content-Type" name="viewport"
          content="text/html; charset=UTF-8; width=device-width, initial-scale=1.0">
    <title>List</title>
    <link href="~/Content/bootstrap/bootstrap.min.css" rel="stylesheet" media="screen" />
    <link href="~/Content/bootstrap/bootstrap-datetimepicker.min.css" rel="stylesheet" />
    <link href="~/Content/jquery-ui/jquery-ui.css" rel="stylesheet" />
    <link href="~/Content/msgBoxLight.css" rel="stylesheet" />
    <link href="~/Content/master.css" rel="stylesheet" />
    <link href="~/Content/slickgrid/slick.grid.css" rel="stylesheet" />
    <link href="~/Content/slickgrid/slickgrid-bootstrap.css" rel="stylesheet" />
    <link href="~/Content/slickgrid/slickgrid-example.css" rel="stylesheet" />
    <style rel="stylesheet" type="text/css">
    </style>
</head>
<body>
    <div class="container-fluid">
        <div class="modal-header">
            <h3 id="myModalLabel">产品数据</h3>
        </div>
    </div>
    <div class="container-fluid">
        <div class="row-fluid">
            <a href="~/product/edit/" data-toggle="modal" data-target="#modelProductEditForm" role="dialog" class="btn btn-info"><i class="icon-white icon-file"></i> 新建</a>
            <a href="~/product/edit/" data-toggle="modal" data-target="#modelProductEditForm" role="dialog" class="btn btn-info"><i class="icon-white icon-file"></i> 编辑</a>
            <a href="#" data-toggle="modal" data-target="#modelProductQueryForm" role="dialog" class="btn btn-info"><i class="icon-white icon-search"></i> 查询</a>
            <a href="#" class="btn btn-info" onclick="productlist.delete();"><i class="icon-white icon-th"></i> 删除</a>
            <a href="#" class="btn btn-info" onclick="productlist.load();"><i class="icon-white icon-th"></i> 刷新</a>
        </div>
    </div>
    <div class="container-fluid">
        <div class="modal-body">
            <div id="myProductGrid" style="width:800px;height:600px;float:left;"></div>
        </div>
    </div>

    <!-- beginning of Modal HTML Page-->
    <div id="modelProductEditForm" class="modal hide eavModalDialog" style="width:540px;height:500px;">
        <div class="modal-dialog">
            <!-- Modal -->
            <div class="modal-body" style="max-height:460px;">
                <!-- Content will be loaded here from "remote.php" file -->
            </div>
        </div>
    </div>

    <div id="modelProductQueryForm" class="modal hide eavModalDialog" style="width:500px;height:200px;">
        <div class="modal-dialog">
            <!-- Modal -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h3 id="myModalLabel">产品查询条件输入</h3>
            </div>
            <div class="modal-body" style="max-height:460px;">
                <!-- Content will be loaded here from "remote.php" file -->
                <p>
                    <span class="a_tit">产品类型:</span>
                    <select id="ddlProductTypeQuery" style="width:280px;">
                        <option value="default" disabled selected>--请选择--</option>
                        <option value="手机">手机</option>
                        <option value="苹果">苹果</option>
                        <option value="小汽车">小汽车</option>
                        <option value="电脑">电脑</option>
                        <option value="飞机">飞机</option>
                        <option value="轮船">轮船</option>
                    </select>
                </p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-primary" onclick="productlist.query();">确定</button>
                <button class="btn" data-dismiss="modal" aria-hidden="true">取消</button>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="~/Scripts/jquery/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery-ui-1.10.3.min.js"></script>

    <script type="text/javascript" src="~/Scripts/jquery/jquery.event.drag-2.2.js"></script>
    <script type="text/javascript" src="~/Scripts/jquery/jquery.msgBox.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootbox.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap-datetimepicker.min.js"></script>
    <script type="text/javascript" src="~/Scripts/bootstrap/bootstrap-datetimepicker.zh-CN.js"></script>
    <script type="text/javascript" src="~/Scripts/handlebars.js"></script>
    <script type="text/javascript" src="~/Scripts/jshelper.js"></script>

    <!-- slickgrid -->
    <script src="~/Scripts/slickgrid/slick.core.js"></script>
    <script src="~/Scripts/slickgrid/slick.grid.js"></script>
    <script src="~/Scripts/slickgrid/slick.dataview.js"></script>
    <script src="~/Scripts/slickgrid/plugins/slick.rowselectionmodel.js"></script>
    <script type="text/javascript" src="~/ViewJS/productlist.js"></script>

    <script type="text/javascript">
        $(function () {
            productlist.load();

            $('#modelProductQueryForm').on('hidden', function () {
                $(this).removeData('modal').find(".modal-body").empty();;
            });

            $('#modelProductEditForm').on('hidden', function () {
                $(this).removeData('modal').find(".modal-body").empty();;
            });
        })
    </script>

</body>
</html>
